<template>
  <div>
    <!-- 搜索栏 -->
    <el-card id="search">     
       <el-button type="info" round>退出</el-button>
    </el-card>
    <!-- 结果列表 -->
    <el-card>
      <el-table :data="userList" style="width: 100%">
     
        <el-table-column prop="id" label="用户ID" width="150">
        </el-table-column>
         <el-table-column prop="username" label="用户名" width="150">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="150"> 
        </el-table-column>
        <el-table-column prop="email" label="电子邮件" > 
        </el-table-column>
        <el-table-column label="操作" width="150" >
            <template slot-scope="scope">
                 <el-button @click="openEditUI(scope.row.id)" type="primary" icon="el-icon-edit" size="mini" circle></el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini" circle></el-button>
            </template> 
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页组件 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchModel.pageNo"
      :page-sizes="[5, 10, 20, 50]"
      :page-size="searchModel.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
      </template>
    </el-table-column>


  </el-table>
</template>
<script>
  export default {
    data(){
      return {
    
      total: 0,
       searchModel: {
         pageNo: 1,
         pageSize: 10,
       },
        userList:[],
      }
   },
   mounted() {
    this.info();
  },
   methods:{
 
     handleSizeChange(val){
      this.searchModel.pageSize = val;
      this.info();
     },
     handleCurrentChange(val){
      this.searchModel.pageNo = val;
      this.info();
     },
 
    info() {
        const data = {
          params: {
          pageNo: this.searchModel.pageNo, 
          pageSize: this.searchModel.pageSize,
          username: this.searchModel.username,
          phone: this.searchModel.phone,
          }
        }
        this.$http.get('/user/list',data).then(res => {
          this.tableDataTemp = res.data.data;
          this.totalItems = this.tableDataTemp.total;
          this.userList = this.tableDataTemp.rows;
        })
      },
    
      infoLogout(){    
        this.$http.all([this.$http.post('/user/logout')]).then(()=>{
       
        this.$router.push({name:'Login'})
        this.$store.commit("X-Token")
  })
      },
    },
  }
 
 </script>



<style>
#search .el-input {
  width: 100px;
  margin-right: 10px;
}
</style>
